<mat-card class="example example5 mat-elevation-z16">
  <mat-card-content>
    <div class="sample">
      <div class="editor">
        <ul class="numbers">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <div class="code-wrapper">
          <ng-scrollbar appearance="standard"
                        pointerEventsMethod="viewport"
                        track="horizontal"
                        trackClass="scrollbar-track"
                        thumbClass="scrollbar-thumb"
                        autoHeightDisabled="false">
          <pre>
            <code>
            <span class="line">&lt;!DOCTYPE html&gt;</span>
              <span class="line">&lt;html lang="en"&gt;</span>
              <span class="line"></span>
              <span class="line">&lt;-- BEGIN head --&gt;</span>
              <span class="line">&lt;head&gt;</span>
              <span class="line">   &lt;meta charset="utf-8" /&gt;</span>
              <span class="line">   &lt;title&gt;ngx-scrollbar – Fully skinnable scrollbars with native scrolling.&lt;/title&gt;</span>
              <span class="line">&lt;/head&gt;</span>
              <span class="line"></span>
              <span class="line">&lt;-- BEGIN body --&gt;</span>
              <span class="line">&lt;body&gt;</span>
            </code>
          </pre>
          </ng-scrollbar>
        </div>
      </div>
    </div>
  </mat-card-content>
</mat-card>
